<template>
  <div class="settingBox">
    <h1>奖励设置</h1>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="奖项"
          width="180">
        <template slot-scope="scope">
          <i class=""></i>
          <span style="margin-left: 10px">{{ scope.row.prizeGrade }}</span>
        </template>
      </el-table-column>
      、

      <el-table-column
          label="奖品"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>奖品: {{ scope.row.gift }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.gift }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
          label="数量"
          width="180">
        <template slot-scope="scope">
          <i class=""></i>
          <span style="margin-left: 10px">{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    弹窗-->
    <el-dialog title="修改奖项" :visible.sync="dialogTableVisible" :data="templateList">
      <template scope='scope'>
        <el-form :model="templateList" ref="templateList" style="padding:0 1vw;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="templateList.prizeGrade">
                <template slot="prepend">奖项</template>
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="templateList.gift">
                <template slot="prepend">奖品</template>
              </el-input>
            </el-col>
          </el-row>
          <br>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="templateList.number">
                <template slot="prepend">数量</template>
              </el-input>
            </el-col>
          </el-row>
          <br>

        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm(templateList)">确定</el-button>
        </span>
    </el-dialog>

    <!--    退出登录-->
    <BackToLogin></BackToLogin>
  </div>
</template>

<script>
  import BackToLogin from "@/components/BackToLogin";

  export default {
    name: "PrizeSetting",

    comments: {
      BackToLogin,
    },

    data() {
      return {
        prizeList: null,

        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],

        // 弹窗
        dialogTableVisible: false,
        templateList: {},
      }
    },

    methods: {
      handleEdit(index, row) {
        console.log(row);
        this.templateList = {
          prizeGrade: row.prizeGrade,
          gift: row.gift,
          number: row.number,
          id: row.id,
        }
        this.dialogTableVisible = true;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },

      // 弹窗修改提交
      submitForm(val) {
        // val为修改之后的内容
        for (let i = 0; i < this.prizeList.length; i++) {
          const item = this.prizeList[i];
          if (item.id === val.id) {
            item.prizeGrade = val.prizeGrade;
            item.gift = val.gift;
            item.number = val.number;

            // 找到要修改的数据并提交后台
            fetch("http://localhost:9090/setPrize", {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(item)
            })
                .then(response => {
                  response.json().then(data => {
                    console.log("获取后台修改后的数据", data);
                    this.prizeList = data;
                    this.tableData = this.prizeList;
                  })
                })
                .catch(err => {
                  console.log(err);
                });
            break;
          }
        }
        // 将修改后的信息存储到浏览器
        // const jsonData = JSON.stringify(this.prizeList);
        // localStorage.setItem('prizeList', jsonData);

        this.dialogTableVisible = false;
      },

      // 获取后台 prizeList
      getPrizeList() {
        fetch("http://localhost:9090/getPrizeList").then(response => {
          response.json().then(data => {
            console.log("PrizeSetting加载后台prizeList", data);
            this.prizeList = data;
            this.tableData = this.prizeList;
          })
        }).catch(err => {
          console.log(err);
        })
      },
    },

    created() {
      this.getPrizeList();
    },

    // mounted() {
    //   const storedData = localStorage.getItem('prizeList');
    //   this.prizeList = JSON.parse(storedData);
    //   this.tableData = this.prizeList;
    // }
  }
</script>

<style scoped>
  .settingBox {
    width: 800px;
    margin: 0 auto;
  }
</style>